import { useState } from "react";
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";
import { motion } from "framer-motion";
import Navbar from "@/components/Navbar";

const subjects = ["语文", "数学", "英语", "物理", "化学", "生物", "政治", "历史", "地理"];

// 模拟成绩数据
const gradeData = [
  { exam: "第一次月考", date: "2023-10-08", subject: "语文", score: 85 },
  { exam: "期中考试", date: "2023-11-15", subject: "语文", score: 88 },
  { exam: "第二次月考", date: "2023-12-10", subject: "语文", score: 82 },
  { exam: "期末考试", date: "2024-01-20", subject: "语文", score: 90 },
];

// 模拟能力雷达图数据
const abilityData = [
  { subject: "语文", A: 85, fullMark: 100 },
  { subject: "数学", A: 78, fullMark: 100 },
  { subject: "英语", A: 92, fullMark: 100 },
  { subject: "物理", A: 80, fullMark: 100 },
  { subject: "化学", A: 75, fullMark: 100 },
  { subject: "生物", A: 88, fullMark: 100 },
  { subject: "政治", A: 90, fullMark: 100 },
  { subject: "历史", A: 85, fullMark: 100 },
  { subject: "地理", A: 82, fullMark: 100 },
];

// 模拟班级排名数据
const rankData = [
  { subject: "语文", score: 90, rank: 5, total: 45, percentage: 11 },
  { subject: "数学", score: 78, rank: 20, total: 45, percentage: 44 },
  { subject: "英语", score: 92, rank: 3, total: 45, percentage: 7 },
];

export default function StudentCenter() {
  const [selectedSubject, setSelectedSubject] = useState("语文");
  const filteredGradeData = gradeData.filter(item => item.subject === selectedSubject);

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* 顶部导航 */}
      <Navbar toggleSidebar={() => {}} />

      {/* 主内容区 */}
      <main className="flex-1 overflow-y-auto p-6">
        <h1 className="text-2xl font-bold text-[#2C3E50] mb-6">学生个人中心</h1>
        
        {/* 学科选择 */}
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-lg shadow-md p-6 mb-6"
        >
          <h2 className="text-xl font-semibold text-[#2C3E50] mb-4">选择学科</h2>
          <div className="flex flex-wrap gap-3">
            {subjects.map(subject => (
              <motion.button
                key={subject}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setSelectedSubject(subject)}
                className={`px-4 py-2 rounded-lg ${
                  selectedSubject === subject
                    ? "bg-[#E74C3C] text-white"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                {subject}
              </motion.button>
            ))}
          </div>
        </motion.div>

        {/* 成绩趋势图 */}
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.1 }}
          className="bg-white rounded-lg shadow-md p-6 mb-6"
        >
          <h2 className="text-xl font-semibold text-[#2C3E50] mb-4">{selectedSubject}成绩趋势</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={filteredGradeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="exam" />
                <YAxis domain={[0, 100]} />
                <Tooltip />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="score"
                  stroke="#2C3E50"
                  strokeWidth={2}
                  activeDot={{ r: 8 }}
                  name="成绩"
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </motion.div>

        {/* 能力雷达图 */}
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-lg shadow-md p-6 mb-6"
        >
          <h2 className="text-xl font-semibold text-[#2C3E50] mb-4">九科能力分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <RadarChart cx="50%" cy="50%" outerRadius="80%" data={abilityData}>
                <PolarGrid />
                <PolarAngleAxis dataKey="subject" />
                <PolarRadiusAxis angle={30} domain={[0, 100]} />
                <Radar
                  name="能力值"
                  dataKey="A"
                  stroke="#2C3E50"
                  fill="#2C3E50"
                  fillOpacity={0.6}
                />
              </RadarChart>
            </ResponsiveContainer>
          </div>
        </motion.div>

        {/* 班级排名 */}
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3 }}
          className="bg-white rounded-lg shadow-md p-6"
        >
          <h2 className="text-xl font-semibold text-[#2C3E50] mb-4">班级排名</h2>
          <div className="space-y-4">
            {rankData.map((item) => (
              <motion.div
                key={item.subject}
                whileHover={{ scale: 1.02 }}
                className={`p-4 rounded-lg ${
                  item.percentage <= 10
                    ? "bg-gradient-to-r from-yellow-100 to-yellow-50 border border-yellow-200"
                    : "bg-gray-50"
                }`}
              >
                <div className="flex justify-between items-center">
                  <span className="font-medium">{item.subject}</span>
                  <div className="flex items-center space-x-4">
                    <span className="text-gray-600">分数: {item.score}</span>
                    <span className={`font-semibold ${
                      item.percentage <= 10 ? "text-yellow-600" : "text-[#2C3E50]"
                    }`}>
                      排名: {item.rank}/{item.total}
                    </span>
                    <span className="text-sm text-gray-500">
                      (前{item.percentage}%)
                    </span>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </main>
    </div>
  );
}
